/**
 * Created by DELL on 2017/6/7.
 */

import React  from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    Image,
    PixelRatio,
    TouchableHighlight,
    TouchableOpacity,
    ListView,
    ScrollView,


} from 'react-native';

import BaseComponent, {base,AppIndictor} from '../../base/Base' ;



let {
    N028_ORDERS$_GET_ORDERS,//获取订单列表
} = base.requests;


export default class OrderDetailPage extends BaseComponent {
    static navigationOptions = ({navigation}) => ({
        title: '订单详情',//navigation 的默认设置属性 标题
    })

    constructor(props) {
        super(props);
        this.state = {
            orderId: this.props.navigation.state.params.orderId,
            orderData: null,
            showIndictor:true,

            orderStatusTitle:'立即支付',
            orderStatusCliclable:true,
            orderStatusBackground:'#ff6138',
            orderStatusTitleColor:'#fff'
        }
    }

    componentWillMount() {

    }

    componentDidMount() {
        this._getOrderDetailInfo();

    }

    //获取订单信息
    _getOrderDetailInfo() {
        base.network.getUipData(N028_ORDERS$_GET_ORDERS, {'id': this.state.orderId}, (success) => {
            if (success && success.length > 0) {
                let data=success[0];
                this._checkOderState(data.status);
                this.setState({
                    orderData:data ,
                    showIndictor:false,
                })
            }
        }, (error) => {

        })
    }

    _toPayPage() {
        if(this.state.orderStatusCliclable){
            this.props.navigation.navigate('PayPage', {isFromOrder: true, orderId: this.state.orderData.orderId})
        }

    }

    // //  订单状态： 0 创建待支付 1 已支付，进行中 2 申请退款，20 同意退款，
    // // 21 退款驳回 ，已退款27 退款成功 28 退款失败 3 支付失败 7已完成 8已取消
    _checkOderState(status){

        let titile;
        let titileColor;
        let backgroundColor;
        let clickable;

        switch (status){
            case '0':
                //创建待支付
                titile='立即支付';
                titileColor='#fff';
                backgroundColor='#ff6138';
                clickable=true;

                break;
            case '1':
                //已支付
                titile='已支付';
                titileColor='#fff';
                 backgroundColor='#C0C0C0';
                clickable=false;
                break;
            case '2':
                //申请退款
                titile='申请退款中...';
                titileColor='#fff';
                backgroundColor='#C0C0C0';
                clickable=false;
                break;
            case '3':
                //支付失败
                titile='支付失败';
                titileColor='#fff';
                backgroundColor='#C0C0C0';
                clickable=false;
                break;
            case '7':
                //7已完成
                titile='已完成';
                titileColor='#34FF6D';
                 backgroundColor='#C0C0C0';
                clickable=false;
                break;
            case '8':
                //8已取消
                titile='已取消';
                titileColor='#fff';
                    backgroundColor='#C0C0C0';
                clickable=false;
                break;
            case '20':
                //同意退款
                titile='同意退款';
                titileColor='#34FF6D';
                    backgroundColor='#C0C0C0';
                clickable=false;
                break;
            case '21':
                //退款驳回
                titile='退款驳回';
                titileColor='#fff';
                    backgroundColor='#C0C0C0';
                clickable=false;
                break;
            case '27':
                //退款成功
                titile='退款成功';
                titileColor='#34FF6D';
                    backgroundColor='#C0C0C0';
                clickable=false;
                break;
            case '28':
                //退款失败
                titile='退款失败';
                titileColor='#fff';
                    backgroundColor='#C0C0C0';
                clickable=false;
                break;

            default:
                //退款失败
                titile='未确定订单状态';
                titileColor='#fff';
                    backgroundColor='#C0C0C0';
                clickable=false;
                break;
        }

        this.setState({
            orderStatusBackground:backgroundColor,
            orderStatusCliclable:clickable,
            orderStatusTitle:titile,
            orderStatusTitleColor:titileColor,
        })
    }

    render() {


        return (
            <View>

                <AppIndictor
                    modalVisible={this.state.showIndictor}
                    size={'large'}
                    color={'#ff6138'}
                />

                <ScrollView style={{height: '92%', marginBottom: 1}}>


                    {this._setUserAddress()}
                    {this._setOrderInfo()}
                    {this._setGoodsInfo()}
                </ScrollView>
                <View style={{height: '8%'}}>
                    {this._setBottomView()}
                </View>


            </View>
        );


    };

    //---------------view 视图-----------------------

    //设置订单收货信息
    _setUserAddress() {
        let orderData = this.state.orderData;
        //有默认地址
        if (orderData) {
            let address = orderData.address
            return (
                <View style={{backgroundColor: '#fff', marginTop: 10, padding: 15}}>
                    <View style={{flexDirection: 'row', marginTop: 1}}>
                        <Image style={{width: 15, height: 15, marginRight: 10,}}
                               source={require('../../imgs/goods/address_name.png')}/>
                        <Text>{address.name + '    ' + address.cellPhone}</Text>
                    </View>

                    <View style={{flexDirection: 'row', marginTop: 5}}>
                        <Image style={{width: 15, height: 15, marginRight: 10,}}
                               source={require('../../imgs/goods/address.png')}/>
                        <Text>{address.province + '  ' + address.city + '  ' + address.district + '  ' + address.details}</Text>
                    </View>
                </View>


            )
        }
    }

    //设置订单信息
    _setOrderInfo() {
        let orderData = this.state.orderData;
        //有默认地址
        if (orderData) {

            return (
                <View
                    style={{backgroundColor: '#fff', marginTop: 10, paddingTop: 15, paddingRight: 15, paddingLeft: 15}}>
                    <OrderDetailItem
                        preContent={'订单编号'}
                        afterContent={orderData.code}
                    />
                    <OrderDetailItem
                        preContent={'订单类别'}
                        afterContent={orderData.serviceCategory.parentName}
                    />
                    <OrderDetailItem
                        preContent={'服务商家'}
                        afterContent={orderData.company.name}
                    />
                    <OrderDetailItem
                        preContent={'下单时间'}
                        afterContent={orderData.createdTime}
                    />
                    <OrderDetailItem
                        preContent={'上门时间'}
                        afterContent={orderData.serviceDate + ' ' + orderData.serviceTimeValues}
                    />
                </View>


            )
        }
    }

    //设置商品信息
    _setGoodsInfo() {
        let orderData = this.state.orderData;

        if (orderData) {
            let serviceFee = orderData.servicePrice;
            if (isNaN(serviceFee)) {
                serviceFee = 0.00
            }

            return (
                <View style={{backgroundColor: '#fff', marginTop: 10}}>

                    <View style={{flexDirection: 'row', padding: 10, paddingLeft: 15, alignItems: 'center'}}>
                        <Image style={{width: 15, height: 15, marginRight: 10,}}
                               source={{uri: orderData.serviceCategory.iconUrl}}/>
                        <Text>{orderData.serviceCategory.name}</Text>
                    </View>

                    <View style={{flexDirection: 'row', padding: 10, paddingLeft: 15, backgroundColor: '#f5f5f5'}}>
                        <Image style={{width: 40, height: 40, marginRight: 10,}}
                               source={{uri: orderData.goods[0].iconUrl}}/>
                        <Text>{orderData.goods[0].name}</Text>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text >¥ {orderData.goods[0].price }*{orderData.goods[0].amount}</Text>
                        </View>
                    </View>

                    <View style={{
                        flexDirection: 'row',
                        paddingBottom: 10,
                        paddingRight: 10,
                        paddingLeft: 15,
                        marginTop: 2
                    }}>
                        <Text>共计{orderData.goodsCount}件商品 合计</Text>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text >¥ {parseFloat(orderData.goods[0].price) * parseFloat(orderData.goods[0].amount)}</Text>
                        </View>

                    </View>


                    <View style={{
                        flexDirection: 'row',
                        paddingBottom: 10,
                        paddingRight: 10,
                        paddingLeft: 15,
                        marginTop: 2
                    }}>
                        <Text>服务费</Text>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text >+ ¥{serviceFee}</Text>
                        </View>

                    </View>


                    <View style={{
                        flexDirection: 'row',
                        paddingBottom: 10,
                        paddingRight: 10,
                        paddingLeft: 15,
                        marginTop: 2
                    }}>
                        <Text>优惠折扣</Text>
                        <View style={{flex: 1, alignItems: 'flex-end'}}>
                            <Text >- ¥{orderData.minusAmount}</Text>
                        </View>

                    </View>

                    <View style={{
                        flexDirection: 'row',
                        paddingBottom: 10,
                        paddingRight: 10,
                        paddingLeft: 15,
                        marginTop: 2
                    }}>
                        <Text style={{color: '#ff6138'}}>备注：{orderData.comments}</Text>

                    </View>

                </View>
            )
        }
    }

    //底部状态显示
    _setBottomView() {
        let orderData = this.state.orderData;
        if (!orderData) {
            return;
        }
        let status=orderData.status;

        return (
            <View style={{height: '100%', flexDirection: 'row', justifyContent: 'flex-start',}}>
                <View style={{
                    width: '70%',
                    backgroundColor: '#fff',
                    flexDirection: 'row',
                    alignItems: 'center',
                    paddingLeft: 15
                }}>
                    <Text>实付总价：</Text>
                    <Text style={{color: '#ff6138'}}>¥{orderData.totalAmount}</Text>
                </View>
                <TouchableHighlight onPress={this._toPayPage.bind(this)}
                                    style={{
                                        width: '30%',
                                        backgroundColor: this.state.orderStatusBackground,
                                        justifyContent: 'center',
                                        alignItems: 'center'
                                    }}>

                    <Text style={{color:this.state.orderStatusTitleColor}}>
                        {this.state.orderStatusTitle}
                    </Text>

                </TouchableHighlight>


            </View>
        )
    }

}
//--------------自定义组件---------------------------

class OrderDetailItem extends BaseComponent {
    render() {
        return (
            <View style={{flexDirection: 'row', marginBottom: 10}}>
                <Text>{this.props.preContent}：{this.props.afterContent}</Text>
            </View>
        )
    }
}